<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: pink;
        }

        .box2 {
            position: absolute;
            width: 20px;
            height: 20px;
            border: 1px solid pink;
            background-color: black;
            top: 200px;
            left: 200px;
        }
    </style>
    <script>
        window.onload = function () {
            let box1 = document.getElementById("box1");
            let box2 = document.getElementById("box2");

            /*             box1.onclick = function(event){
                            console.log(event.clientX);
                        } */

            /*             document.onmousemove = function(event) {
                            box1.style.top = event.pageY + "px";
                            box1.style.left = event.pageX + "px";
                            console.log("top is = " + box1.style.top);
                            console.log("left is = " + box1.style.left);
                        } */

            /*             box1.onmousedown = function (event) {
                            let left = event.offsetX;
                            let top = event.offsetY;
            
                            console.log(left + " and " + top);
                            document.onmousemove = function (event) {
                                box1.style.top = event.pageY - top + "px";
                                box1.style.left = event.pageX - left + "px";
                            }
                            document.onmouseup = function () {
                                document.onmousemove = null;
                                document.onmouseup = null;
                            }
                        } */

            /*             drag(box1);
                        drag(box2);
                        function drag(obj){
                            obj.onmousedown = function (event) {
                            let left = event.offsetX;
                            let top = event.offsetY;
            
                            document.onmousemove = function (event) {
                                obj.style.top = event.pageY - top + "px";
                                obj.style.left = event.pageX - left + "px";
                            }
                            document.onmouseup = function () {
                                document.onmousemove = null;
                                document.onmouseup = null;
                            }
                        }
                        } */
            box1.onwheel = function (event) {
                console.log(event.wheelDelta);
                if (event.wheelDelta > 0){
                    box1.style.height = box1.clientHeight - 10 + "px";
                    console.log("height=" +  box1.style.height);
                    console.log("client=" + box1.clientHeight);
                }
                else if (event.wheelDelta < 0) {
                    box1.style.height = box1.clientHeight + 10 + "px";
                }
                return false;
            }
        }
    </script>
</head>

<body style="height: 1000px;">

<!-- <body> -->
    <div class="box1" id="box1">
    </div>
    <div class="box2" id="box2">
    </div>
</body>

</html>